<template>
  <p class="p">count: {{ count }}</p>
  <button @click="fn">count++</button>

  <hr />

  <p>name: {{ state.name }}</p>
  <button @click="fn2">btn</button>
</template>

<!-- <script>
// ref函数就是用来创建响应式变量的
import { ref } from "vue";

export default {
  setup() {
    const count = ref(10);
    const fn = () => {
      // 在js里面要用xxx.value的形式才能拿到ref的值
      // console.log(count);
      count.value++;
    };

    // setup里面定义的内容都需要用return才能在template上面使用
    return { count, fn };
  },
  data() {
    return {
      count: 10
    }
  },
  methods: {
    fn() {}
  }
};
</script> -->

<script setup>
// setup属性的写法
// 这种写法是省略了export default,也省略了setup函数以及函数里面的return
import { ref, nextTick, reactive } from "vue";

let timer; // 像一些比如定时器这样不需要在template上面显示的变量（不需要响应式的变量，就不要用ref来定义）
const count = ref(10);
const fn = () => {
  count.value++;
  // console.log(count.value);
  // 在setup里面不能使用this了
  // this.$nextTick(() => {
  //   console.log(document.querySelector(".p").innerHTML);
  // });
  nextTick(() => {
    console.log(document.querySelector(".p").innerHTML);
  });
};

// const fn3 = function() {};
// function fn4() {};

// reactive也可以用来创建响应式数据
// ref是一个变量一个变量的定义
// reactive是一次性定义很多个变量
// 一般全部都用ref来定义，除了form表单
const state = reactive({
  name: "zhangsan",
});
const fn2 = () => {
  state.name = "lisi";
};
</script>
